<template>
 

  <a-modal :title="title" :width="900"  style="padding: 10px;" :centered="true" :visible="visible" @ok="handleSubmit" @cancel="handleCancel" cancelText="取消" okText="确定"
     >
    <a-tabs type="card">
      <a-tab-pane key="1" tab="选择本地文件上传">
        <div>
          <bd-Upload ref="BdUpload" @ok="handleOk"  ></bd-Upload> 
        </div> 
      </a-tab-pane>
      <a-tab-pane key="2" tab="高拍仪拍照上传">
        <div > 
          <div v-if="operatingSystem=='Windows'"> 
              <Web-Camera ref="WebCamera"  @ok="handleOk"  ></Web-Camera> 
          </div>  
          <div v-if="operatingSystem=='Linux' || operatingSystem == 'UNIX'"> 
              <Leb-Camera ref="LebCamera"  @ok="handleOk"  ></Leb-Camera> 
          </div>  
        </div>  
      </a-tab-pane> 
    </a-tabs>
    <template slot="footer" >
      <div> 
      </div>
    </template>
    <a-modal v-model:visible="isLoading" :footer="null" :keyboard="false" :maskClosable="false" :closable="false" 
    :width="100"
    :height="100"    wrapClassName="web">
      <div style="text-align:center;margin-top:20px;" >
        <a-spin :size="large"/>
        <p>loading...</p> 
      </div>
    </a-modal>
  </a-modal> 

</template>

<script> 
import { ref } from 'vue';
import { httpAction, getAction } from '@/api/manage'
import { mapGetters } from 'vuex' 
import WebCamera from '@/components/webCamera/webCamera'
import LebCamera from '@/components/lebCamera/lebCamera'
import bdUpload from '@/components/bdUpload/bdUpload'
import store from '@/store'
import OSInfo from '@/utils/OSInfo'
export default {
  name: 'WjUpload',
  components: {
    WebCamera,
    bdUpload,
    LebCamera
  },
  props: {
    onConfirm:{
      type : Function,
      default: () => {},
    },
    formData :{
      type:Object,
      default: () => {},
    } 
        
      
  },
  data () {
    return {
      isLoading:false,
      operatingSystem: null, // 操作系统
      loading: false,
      headers: { 
        'X-Access-Token':  store.getters.token
      }, 
      visible: false,
      wrapperCol:'',
      title: '选择合适的上传方式进行上传', 
     
      addOrEditForm: this.$form.createForm(this),
      // form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      url: {  
        upload: window._CONFIG['domianURL'] +"/ap/apiInfo/upload",
        add:"/dajy/daJyxx/hcadd"
      },
      data:{
        id:'',
        lx:'',
        filelist:[],
      },
      fileKey:"",
      
    }
  },
  created (id) {
    console.log("created");  
    this.operatingSystem =this.init()
    this.data.id = id;
  },

  methods: {
    async init() {
        console.log("初始化")
        this.operatingSystem = await OSInfo.getOSInfo()
        console.log("操作系统",this.operatingSystem)
      },
    handleUpload(e){

    },
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        this.data.filelist = info.fileList;
        console.log(info.file, info.fileList);
      }
      if (status === 'done') { 
        this.data.filelist = info.fileList;
        this.$message.success(`${info.file.name} 文件上传成功.`);
      } else if (status === 'error') {
        this.data.filelist = info.fileList;      
        this.$message.error(`${info.file.name} 文件上载失败.`);
      }
    },
    ...mapGetters(["userInfo"]),
    show(id) {
       
      this.fileKey = Math.random();
      this.data.id = id;
      this.data.lx = '';
      this.data.filelist = [];
      this.visible = true;
      
      this.$refs.BdUpload.show();
      console.log("show");
      if (this.operatingSystem == 'Windows'){
        this.$refs.WebCamera.show();
      }
      if (this.operatingSystem == 'Linux' || this.operatingSystem == 'UNIX'){
        this.$refs.LebCamera.show();
      }
      // 
      
      this.visible = true;
    },
    close () {
      this.$emit('destroy');
      this.visible = false;
    },
    confirm() {
      console.log("confirm");
      this.onConfirm('子窗体返回的值');
    },
    handleSubmit() {
      
    
    },

    handleCancel() {
      this.close()
    },
    handleOk(lx,data){
      this.loading = true;
      this.isLoading = true;
      this.data.lx = lx;
      this.data.filelist = data; 
      if (this.data.filelist.length == 0){
        this.$message.error("请上传文件");
        return;
      }
      httpAction(this.url.add,this.data,'post').then((res)=>{ 
        if(res.code == "0"){
          this.loading = false;
          this.isLoading = false;
          this.$emit('ok','');
          this.close(); 
        }
        }).finally(() => { 
          this.loading = false;
          this.isLoading = false;
      })   
    },
  
    handleConfirmBlur  (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    }
  }
}
</script>

<style>
  .ant-upload.ant-upload-drag{
    height:200px
  }
  /* .ant-card{
    height:100%
  }
  .ant-card-body{
    padding: 10px;
  }
  .ant-modal-body{
    padding: 10px;
  } */
  /* .ant-modal-footer{
    display: none;
  } */
</style>